<template>
  <view class="cardstyle" :style="{'background-color': bgColor}">
    <!-- 上方标题 + 图片区域 -->
    <view class="topbox" v-if="mode !== 3">
      <!-- mode===1 显示单图 -->
      <view v-if="mode === 1" class="imgbox">
        <image :src="showImage" mode="aspectFill" @error="handleImageException"></image>
      </view>

      <!-- 标题与信息 -->
      <view class="textbox">
        <text class="titlebox" :style="{color: mode===3 ? '#aaa' : '#000'}">{{ title }}</text>

        <view class="tipsbox">
          <text style="color:red" v-if="isTop">置顶</text>
          <text>{{ author }}</text>
          <text v-if="mode !== 3">{{ comments }}评</text>
          <view style="flex:1;display:flex;justify-content:flex-end;">
            <text>{{ time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 广告模式：三图广告 + 下方信息 -->
    <view v-else>
      <!-- 灰色标题 -->
      <text class="titlebox" style="color:#aaa;">{{ title }}</text>

      <!-- 三图广告 -->
      <view class="adbox">
        <view v-for="(item, index) in images" :key="index">
          <image :src="item" mode="aspectFill" @error="handleImageError(index)"></image>
        </view>
      </view>

      <!-- 广告下方标识栏 -->
      <view class="tipsbox ad-tips">
        <text style="color:#00f;">广告</text>
        <text>{{ author }}</text>
        <view style="flex:1;display:flex;justify-content:flex-end;">
          <text>{{ time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "NewsView",
  props: {
    title: String,
    isTop: Boolean,
    author: String,
    comments: Number,
    time: String,
    images: {
      type: Array,
      default: () => []
    },
    mode: {
      type: Number,
      default: 0
    },
    bgColor: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {
      defaultPic: "/static/nophoto.png",
      failPic: "/static/fail-image.png",
      imageError: false
    };
  },
  computed: {
    showImage() {
      if (this.images && this.images.length > 0) {
        return this.imageError ? this.failPic : this.images[0];
      } else {
        return this.defaultPic;
      }
    }
  },
  methods: {
    handleImageException() {
      console.log("图片加载失败: " + this.title);
      this.imageError = true;
    },
    handleImageError(index) {
      console.log("多图加载失败 index=" + index);
      this.$set(this.images, index, this.failPic);
    }
  }
};
</script>

<style>
.cardstyle {
  border: 1px solid #e0e0e0;
  border-radius: 10rpx;
  padding: 10rpx;
  margin: 10rpx;
  background-color: #fff;
}

.topbox {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.imgbox {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgbox image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}

.textbox {
  flex: 1;
}

.titlebox {
  font-size: 32rpx;
  line-height: 44rpx;
  font-weight: 600;
  margin-bottom: 6rpx;
}

.tipsbox {
  display: flex;
  color: #888;
  font-size: 24rpx;
  gap: 13rpx;
  align-items: center;
}

.adbox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 10rpx;
}

.adbox image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 10rpx;
}


.ad-tips {
  margin-top: 8rpx;
  color: #888;
  font-size: 24rpx;
  padding: 0 10rpx;
}

.cardstyle[style*="#fff7f7"] {
  border: 1rpx dashed #ffcccc;
}
</style>
